<template>
  <div>
    <div>
      <Divider>数据列表</Divider>
    </div>
    <div class="dataList">
      <Table class="tcTable" border stripe :data="list" :columns="columns" stripe></Table>
    </div>
    <div style="margin: 10px;overflow: hidden" ref="pagenation">
      <div style="float: right;">
        <Page :total="p.total" :current="p.page" @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import {requestPost} from "../../utils/js/HttpUtil.js"
  export default {
    name: "TableHelper",
    props: {
      columns: {
        type: Array,
        default: () => []
      },
      action: {
        type: String,
        default: ''
      },
      page: {
        type: Number,
        default: 1
      },
      rows: {
        type: Number,
        default: 10
      },
      params: {
        type: Object,
        default: () => {}
      }
    },
    data(){
      return{
        list:[],
        p: {
          total: 0,
          rows: this.rows,
          page: this.page
        }

      }
    },
    methods:{
      getData(){
        requestPost(this.action,{
          ...this.params,...this.p
        }, (data) => {
          
          this.list = data.data.list
          this.p.total = data.data.total
          this.p.page = data.data.pageNum
        })
      },
      changePage(page){
        this.p.page = page;
        this.getData();
      }
    },
    mounted() {
     // console.log(this.columns)
     // console.log(this.list)
      this.getData();

    }
  }
</script>

<style>
  .tcTable button[type=button].ivu-btn.ivu-btn-small{
    margin-left: 2px;
  }
</style>
